<template>
  <div class="d-flex align-items-center">
    <img :src=avatarUrl class="img rounded-circle" alt="">
    <div class="px-1 fs-6 text-dark">{{ name }}</div>
  </div>
</template>

<script>
export default {
  name: "AvtarComponent",
  props: {
    avatarUrl: String,
    name: String,
  }
}
</script>

<style scoped>
.img {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem;
  object-fit: cover;
}
</style>